<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>编辑管理员</title>
    <link rel="stylesheet" href="../static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../static/css/public.css" media="all">
    <link rel="stylesheet" href="../static/css/formSelects-v4.css">
    <script src="/static/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="/static/js/formSelects-v4.js"></script>
</head>
<style>
    body{
        background-color: white;
    }
    #subbtn{
        margin-left: -110px;
    }
    #sendCode{
        position: absolute;
        top: 0;
        right: 0;
    }
    .xm-select-dl{
        height: 266px;
    }
</style>
<body>
<div class="layui-form">
    <form id="addform" class="layui-form layui-form-pane">
        <input type="hidden" id="managerId" name="managerId">
        <div id="managerNameDIV" class="layui-form-item">
            <div lay-filter="myDiv">
                <label class="layui-form-label">管理员昵称</label>
                <div class="layui-input-block">
                    <input id="managerName" name="managerName" lay-verify="required" type="text" class="layui-input">
                </div>
            </div>
        </div>
        <div id="managerAccountDIV" class="layui-form-item">
            <div lay-filter="myDiv">
                <label class="layui-form-label">管理员账号</label>
                <div class="layui-input-block">
                    <input id="managerAccount" name="managerAccount" lay-verify="required" type="text" class="layui-input">
                    <a id="sendCode" class="layui-btn layui-btn-normal">发送验证码</a>
                </div>
            </div>
        </div>
        <div id="captchaDIV" class="layui-form-item">
            <div lay-filter="myDiv">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-block">
                    <input id="captcha" name="captcha" type="text" class="layui-input">
                </div>
            </div>
        </div>
        <div id="passWordDIV" class="layui-form-item">
            <div lay-filter="myDiv">
                <label class="layui-form-label">管理员密码</label>
                <div class="layui-input-block">
                    <input id="passWord" name="passWord" type="text" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item" lay-filter="myDiv">
            <label class="layui-form-label">所属部门</label>
            <div class="layui-input-block">
                <select id="departmentId" name="departmentId" lay-filter="mySelect" lay-verify="required">
                    <option  value="">请选择部门</option>
                    <option th:each="department : ${departments}" th:value="${department.departmentId}" th:text="${department.departmentName}"></option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-md4">
                <label class="layui-form-label">分配权限</label>
                <div class="layui-input-block">
                    <select name="roleId" id="roleId" lay-filter="roleId" xm-select="roleId" xm-select-type="1"><
                        <option  value="">请选择权限</option>
                        <optgroup th:each="data:${data}" th:label="${data.key}">
                            <option  th:each="role : ${data.value}" th:value="${role.roleId}" th:text="${role.roleDescribe}"></option>
                        </optgroup>
                    ></select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" id="subbtn" lay-submit lay-filter="saveBtn"></button>
            </div>
        </div>
    </form>
</div>
<script th:inline="javascript" type="text/javascript">
    let data={
        managerId: null,
        managerAccount: null,
        managerName: null,
        passWord: null,
        departmentId: null,
        departmentName: null,
        roleIds:null,
        checkCode:null
    }
    let role;
    //全局定义一次, 加载formSelects
    layui.config({
        base: '/' //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        formSelects: '/static/js/formSelects-v4'
    });
    //加载模块
    layui.use(['jquery', 'formSelects'], function () {
        var formSelects = layui.formSelects;

    });
    //获取多选框的值
    layui.use(['form', 'layer', 'jquery', 'table', 'laydate', 'element', 'upload', 'flow'], function () {
        let $$ = layui.jquery;
        let form = layui.form,
            layer = parent.layer == undefined ? layui.layer : parent.layer;

        $('#addform').submit(function (e){
            let formData=new FormData(this);
            let roleIds = JSON.stringify(layui.formSelects.value('roleId', 'valStr'));//取值name数组
            let checkCode=$('#captcha').val();
            data.roleIds=roleIds;
            console.log(roleIds);
            data.managerId=formData.get("managerId");
            data.managerAccount=formData.get("managerAccount");
            data.managerName=formData.get("managerName");
            data.passWord=formData.get("passWord");
            data.departmentId=formData.get("departmentId");
            data.departmentName=$('#departmentId option:selected').text();
            if(checkCode!==null && checkCode!==''){
                data.checkCode=checkCode;
                let load = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                $.ajax({
                    type: "post",
                    url: submitUrl,
                    async: false,
                    data: data,
                    success: function (res) {
                        if (res.code === 200) {
                            layer.msg(res.message, {time: 5000, icon: 1, offset: [15]});
                            let index = parent.layer.getFrameIndex(window.name);
                            setTimeout(function () {
                                window.parent.location.reload();//刷新父页面
                                parent.layer.close(index);
                            }, 1500);
                        } else {
                            layer.msg(res.message, {time: 5000, icon: 1, offset: [15]});
                        }
                    },
                    error: function (error) {//请求失败后调用的函数
                        layer.msg(error, {time: 5000, icon: 2, offset: [15]});
                    },
                    complete:function () {
                        layer.close(load)
                    }
                })
            }else{
                console.log("编辑")
                $.ajax({
                    type:"post",
                    url:submitUrl,
                    data:data,
                    success:function (res){
                        if(res.code===200){
                            layer.msg(res.message,{time:5000,icon:1,offset:[15]});
                            let index=parent.layer.getFrameIndex(window.name);
                            setTimeout(function (){
                                window.parent.location.reload();//刷新父页面
                                parent.layer.close(index);
                            },1500);
                        }else{
                            layer.msg(res.message,{time:5000,icon:1,offset:[15]});
                        }
                    },
                    error:function (error){
                        layer.msg(error,{time:5000,icon:2,offset:[15]});
                    }
                })
            }


            e.preventDefault();
        });

    });
    $(function (){
        let manager=[[${manager}]];
        let role=[[${roles}]];
        let selfRoles=[[${selfRoles}]]
        if(manager===null){
            $('#subbtn').html("确认添加");
            submitUrl="/manager/addManager";
        }else{
            $('#managerId').val(manager.managerId);
            $('#managerAccount').val(manager.managerAccount);
            $('#managerName').val(manager.managerName);
            $('#managerAccount').attr("readOnly","readOnly");
            $('#managerName').attr("readOnly","readOnly");
            $('#passWordDIV').css("display","none");
            $('#captchaDIV').css("display","none");
            $('#departmentId').val(manager.departmentId);
            $('#subbtn').html("确认修改");
            submitUrl="/manager/editManagerPower";
            layui.formSelects.value('roleId', selfRoles);
        }
        layui.form.render(); //重新渲染显示效果
        //发送验证码
        $('#sendCode').click(function (){
            let to=$('#managerAccount').val();
            let userName=$('#managerName').val();
            let load = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
            $.ajax({
                type:"post",
                url:'/sms/sendCodeMail',
                data:{
                    to:to,
                    userName:userName
                },
                success:function (res){
                    if(res.code===200){
                        layer.msg(res.message,{time:5000,icon:1,offset:[15]});
                    }else{
                        layer.msg(res.message,{time:5000,icon:1,offset:[15]});
                    }
                },
                error:function (error){
                    layer.msg(error,{time:5000,icon:2,offset:[15]});
                },
                complete:function () {
                    layer.close(load)
                }
            })
        })

    })
</script>
</body>
</html>